<template>
  <div id="orderDetails">
    <el-button class="exitBtn" @click="exitBtn">返回</el-button>
    <div class="title">
      <span>待支付</span>
    </div>

    <!-- 订单详情内容 -->
    <div id="orderContent">
      <div class="contentItem clear">
        <div>
          <div class="one"><p>客户信息</p></div>
          <div class="two">
            <p>
              客户姓名 <span>{{ serviceDeatil.userName }}</span>
            </p>
            <p>
              联系手机 <span>{{ serviceDeatil.userPhone }}</span>
            </p>
          </div>
        </div>
        <div>
          <div class="one"><p>服务商</p></div>
          <div class="two">
            <p>商户类型 <span>{{ serviceDeatil.orderServiceName }}</span></p>
            <p>商户名称 <span>{{ serviceDeatil.userPhone }}</span></p>
            <p>商户编号 <span>{{ serviceDeatil.id }}</span></p>
          </div>
        </div>
        <div class="oP">
          <div class="one"><p>项目信息</p></div>
          <div class="two">
            <p>项目名称 <span>{{serviceDeatil. orderService }}</span></p>
            <p>
              项目时长 <span>{{ serviceDeatil.projectTime }}</span>
            </p>
            <p id="twooP">
              项目简介
              <span>{{ serviceDeatil.projectDescribe }}</span>
            </p>
            <div>
              <p id="twoimg">项目图片</p>
              <!-- <img :src="'http://172.16.113.53:8888'+serviceDeatil.projectPicture" alt=""> -->
              <img src="http://172.16.113.113:8080/D02.jpg" alt="" id="imga">
            </div>
          </div>
        </div>
        <div class="oP">
          <div class="one"><p>订单信息</p></div>
          <div class="two">
            <p>订单金额 <span>{{ serviceDeatil.projectPrice }}</span></p>
            <p>支付金额 <span>{{ serviceDeatil.projectPrice }}</span></p>
            <p>下单时间 <span>{{ serviceDeatil.orderDate |timestampToTime}}</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  name: "orderDetails",
  data() {
    return {
      serviceDeatil: {} /* 存放项目详情渲染的数据 */,
    };
  },
  methods: {
    // 点击返回
    exitBtn() {
      this.$router.push({ name: "order" });
      console.log("点击了");
    },
  },
  mounted() {
    console.log("通过路由1111传递数据", this.$route.params.data);
    // this.serviceDeatil = this.$route.params.row;
    this.serviceDeatil = this.$route.params.data;
    console.log("所有的数据", this.serviceDeatil);
  },
  computed: {},
  watch: {},
};
</script>
  
  <style scoped lang='less'>
* {
  margin: 0px;
  padding: 0px;
}

/* 清除浮动流和解决高度塌陷 */
.clear::before,
.clear::after {
  content: "";
  display: table;
  clear: both;
}
#imga{
  width: 90px;
  height: 90px;
}
.title {
  width: 70px;
  height: 20px;
  padding-left: 10px;
  border-left: 4px solid #0082cc;
  font-size: 14px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.exitBtn {
  width: 60px;
  height: 30px;
  padding: 0;
  text-align: center;
  font-size: 12px;
}
#twoimg{
  color: #000;
}
//详情内容
#orderContent {
  font-size: 14px;
  // border: 1px solid black;
  .contentItem {
    div {
      width: 100%;
      height: 80px;
      color: #7f7f7f;
      // border: 1px solid red;

      .one {
        width: 8%;
        height: 100%;
        float: left;
      }
      .two {
        width: 91%;
        height: 100%;
        float: right;
        color: black;

        p {
          width: 100%;
          height: 30px;
          // border: 1px solid blue;

          span {
            height: 30px;
            // border: 1px solid red;
            margin-left: 40px;
          }
        }
      }
    }
    .oP {
      height: 230px;
      margin-top: 50px;

      .one {
        width: 8%;
        height: 100%;
        float: left;
      }

      .two {
        width: 91%;
        height: 100%;
        float: right;
        color: black;

        p {
          width: 100%;
          height: 30px;

          span {
            width: 200px;
            height: 30px;
            margin-left: 40px;
          }
        }

      }
    }
    .toP {
      height: 120px;

      .one {
        width: 8%;
        height: 100%;
        float: left;
      }

      .two {
        width: 91%;
        float: right;
        color: black;

        p {
          width: 100%;
          height: 30px;

          span {
            width: 200px;
            height: 30px;
            margin-left: 40px;
          }
        }
      }
    }
  }
}
</style>